<script setup lang="ts">
import { Fragment, h, ref } from "vue";

import { Plus } from "@element-plus/icons-vue";
import { ElButton, ElImage, ElTag } from "element-plus";

import { ProTableScope, ProTableUltra } from "@/modules/package/table";
import DialogCarouse from "./compontents/DialogCarouse.vue";

import ApiContent from "@/api/content";
import useEnum from "@/hooks/useEnum";
import useModal from "@/hooks/useModal";
import useDelete from "@/hooks/useDelete";

const loading = ref(false);

setTimeout(() => {
  loading.value = true;
}, 5000);

const tableColumns = [
  {
    label: "序号",
    type: "index",
    width: 70,
  },

  {
    label: "图片",
    slot: "img",
    width: 160,
  },

  {
    label: "标题",
    prop: "title",
    minWidth: 200,
  },

  {
    label: "展示状态",
    slot: "status",
    width: 140,
  },
  {
    label: "点击事件",
    slot: "event",
    minWidth: 200,
  },
  {
    label: "排序",
    prop: "sort",
    width: 100,
  },
  // {
  //     label: "备注",
  //     prop: "desc",
  //     minWidth: 200,
  // },
  {
    label: "创建时间",
    prop: "create_time",
    minWidth: 120,
  },
  {
    label: "操作",
    // slot: "operate",
    width: 140,
    renderNode: (row: any) =>
      h(Fragment, [
        h(
          ElButton,
          {
            link: true,
            type: "primary",
            onClick: () => modalApi.open(row),
          },
          "编辑"
        ),
        h(
          ElButton,
          {
            link: true,
            type: "danger",
            loading: isDeleting.value,
            onClick: () => del(row),
          },
          "删除"
        ),
      ]),
  },
];

const { get } = useEnum("EnumBannerType");

const refTable = ref();
const [Modal, modalApi] = useModal({
  width: 500,
  title: (source) => (source ? "编辑轮播图" : "新增轮播图"),
});

// 刷新Table列表
const refreshList = () => refTable.value.refresh();

// 删除
const { isFetching: isDeleting, del } = useDelete(ApiContent.deleteInfo, {
  refresh: refreshList,
});
</script>

<template>
  <div class="mb-4 text-right">
    <ElButton type="primary" size="large" :icon="Plus" @click="modalApi.open()"
      >新增轮播图
    </ElButton>
  </div>

  <ProTableUltra
    ref="refTable"
    :columns="tableColumns"
    :fetch-url="ApiContent.getInfoList"
    :fetch-options="{ defaultSearch: { type: 7, category: 2 } }"
    footer-fixed
  >
    <ProTableScope>
      <template #img="{ row }">
        <ElImage
          class="w-120px"
          :src="row.img"
          :preview-src-list="[row.img]"
          preview-teleported
        />
      </template>

      <template #event="{ row }">
        <p>事件：{{ get(row.jump_type, "label") }}</p>
        <p v-if="row.jump_type != 0">地址：{{ row.jump_url }}</p>
      </template>

      <template #status="{ row }">
        <ElTag :type="row.status == 1 ? 'info' : 'success'">
          {{ row.status == 1 ? "不展示" : "展示" }}
        </ElTag>
      </template>

      <!-- <template #operate="{ row }">
        <ElButton type="primary" link @click="open(row)">编辑</ElButton>
        <ElButton link type="danger" @click="del(row)" :isDeleting="isDeleting"
          >删除</ElButton
        >
      </template> -->
    </ProTableScope>
  </ProTableUltra>

  <Modal>
    <DialogCarouse @success="refreshList" />
  </Modal>
</template>
